<template>
    <Row>
        <div>
            <Row class="margin-top-10">
                <Col span="24">
                    <Card>
                        <Row style="margin-bottom: 20px">
                            <Col span="6" style="margin-left: 10px">
                                接口名称:
                                <Input v-model="detailData.caseName" placeholder="请输入接口名称" style="width: 50%;margin-left: 10px"></Input>
                            </Col>

                            <Col span="6" style="margin-left: 10px">
                                分组名称:
                                <Select v-model="detailData.ownershipGroup_id" placeholder="请选择分组名称" style="width: 50%">
                                    <Option v-for="item in superGroupName" :value="item.id" :key="item.id">{{item.name}}</Option>
                                </Select>
                            </Col>

                            <Col span="6" style="margin-left: 10px">
                                接口类型:
                                <Select v-model="detailData.type_status_id" placeholder="请选择接口类型" style="width: 50%">
                                    <Option v-for="item in interfaceType" :value="item.id" :key="item.id">{{item.name}}</Option>
                                </Select>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="1" class="margin-right-10" style="min-width: 80px">
                                <Select v-model="requestId">
                                    <Option v-for="(item,index) in requestType" :value="item.id" :key="index">{{ item.name }}</Option>
                                </Select>
                            </Col>
                            <Col span="1" class="margin-right-10" style="min-width: 80px">
                                <Select v-model="detailData.xieyi_type_id">
                                    <Option v-for="(item,index) in agreementType" :value="item.id" :key="index">{{ item.name }}</Option>
                                </Select>
                            </Col>
                            <Col span="2" style="width: 200px;" class="margin-right-10">
                                <Select v-model="detailData.hostManage_id" placeholder="请选择Host">
                                    <Option v-for="(item,index) in hostList" :value="item.id" :key="index">{{ item.name }}</Option>
                                </Select>
                            </Col>
                            <Col  span="1" style="width: 80px;">
                                <Button type="primary" @click="sendRequest" :loading="interface.sendLoading" style="width: 60px;" class="margin-right-10">Send</Button>
                            </Col>
                            <!--<Col  span="1">-->
                                <!--<Button type="primary" @click="saveInterface" :loading="interface.saveLoading"  style="width: 60px;">保存</Button>-->
                            <!--</Col>-->
                        </Row>

                        <Row class="margin-top-10">
                            <!--<Col span="3" class="margin-right-10">-->
                                <!--<Input v-model="requestHost" type="textarea" autosize placeholder="请选择host"></Input>-->
                            <!--</Col>-->
                            <Col  class="margin-right-10">
                                <Input v-model="requestUrl" type="textarea" autosize @on-focus="urlOnFocus" placeholder="请输入接口名称以及get参数"></Input>
                            </Col>
                        </Row>
                    </Card>
                </Col>
            </Row>

            <Card>
                <Row>
                    <Table border
                           :columns="getTableData.header"
                           :data="items"
                    >
                    </Table>
                </Row>
            </Card>

            <Card>
                <Tabs :value="tabsActive" v-if="tabsShow">
                    <TabPane label="预留" name="Authorization">暂无内容</TabPane>
                    <TabPane label="Body" name="Body" :disabled="showPostTable">
                        <Row>
                            <Table border
                                   :columns="postTableData.header"
                                   :data="itemsPost"
                            >
                            </Table>
                        </Row>
                    </TabPane>
                </Tabs>

            </Card>

            <Card>
                <div style="border-bottom: 1px solid #e0e0e0;padding-bottom: 10px">
                    <!--<Icon v-if="showResponse" type="chevron-up"></Icon>-->
                    <!--<Icon v-else type="chevron-down"></Icon>-->
                    响应结果
                </div>
                <pre>{{responseData}}</pre>
                <!--<div v-show="showResponse" style="white-space: pre-line;">{{responseData}}</div>-->

                <div @click="clickHistroy" style="border-bottom: 1px solid #e0e0e0;padding:10px 0;border-top: 1px solid #e0e0e0;">
                    请求历史
                </div>
                <div style="margin: 20px">
                    <Row>
                        时间： {{historyDate.create_date}}
                    </Row>
                    <Row>
                        URL： {{historyDate.url}}
                    </Row>
                    <Row style="width: 100%">
                        请求结果：<pre>{{historyDate.result_data}}</pre>
                    </Row>
                </div>
            </Card>
        </div>

    </Row>
</template>

<script>
    import util from '../../../../libs/util';
    import qs from 'qs';
    export default {
        name: 'add',
        props: [
            'detailData',
            'historyDate',
            'blockFlag',
            'blockId',
            'projectId'
        ],
        data () {
            return {
                interface: {
                    saveLoading: false,
                    sendLoading: false
                },
                highlight: true, // 表格开启高亮行
                superGroupName: [], // 所有上级分组名称数据
                interfaceType: [], // 接口类型数据
                requestType: [], // requestType数据
                agreementType: [], // agreementType数据
                miaoShuResult: [], // 测试环境还是其他
                hostList: [], // host地址
                requestHost: '', // 当前选中的 host
                getRequest: [], // 获取的get参数
                postRequest: [], // 获取的post参数
                responseData: '',
                showParameter: true, // 请求参数显示与否
                showResponse: true, // 响应结果显示与否
                showHistroy: true, // 请求历史显示与否
                showPostParameter: false, // post参数显示与否
                caseName: '',
                ownershipGroup_id: '',
                type_status_id: '',
                requestUrl: '',
                requestId: 1,
                agreementId: 1,
                hostManage_id: '',
                requestSelect: {
                    requestUrl: '',
                    hostManage_id: '',
                    oldVal: '', // 选择后host的值
                    questionMark: '', // 输入框一有key就有问号
                    environmentId: 1,
                    path: ''
                },
                // getindex: 1,
                // postindex: 1,
                temp: '',
                upToDown: true,
                downToUp: true,
                getTableSelectAll: false,
                tabsShow: true,
                tabsActive: 'Authorization',
                showPostTable: true, // post的表格是否可以点击
                getTableData: {
                    header: [
                        {
                            width: 60,
                            align: 'center',
                            renderHeader: (h, params) => {
                                return h('Checkbox', {
                                    props: {
                                        value: this.getTableSelectAll
                                    },
                                    on: {
                                        'on-change': (e) => {
                                            this.upToDown = true;
                                            this.downToUp = false;
                                            this.getTableSelectAll = e;
                                            for (let i = 0; i < this.itemsCopy.length; i++) {
                                                this.itemsCopy[i].check = e;
                                            }
                                        }
                                    }
                                });
                            },
                            render: (h, params) => {
                                let _this = this;
                                return h('Checkbox', {
                                    props: {
                                        value: _this.itemsCopy[params.row._index].check
                                    },
                                    on: {
                                        'on-change': (e) => {
                                            this.upToDown = true;
                                            this.downToUp = false;
                                            _this.getTableSelectAll = e;
                                            _this.itemsCopy[params.row._index].check = e;
                                            let m = 0;
                                            if (e) {
                                                for (let i = 0; i < _this.itemsCopy.length; i++) {
                                                    if (_this.itemsCopy[i].check) {
                                                        m++;
                                                    }
                                                }
                                                if (m === _this.itemsCopy.length) {
                                                    _this.getTableSelectAll = true;
                                                } else {
                                                    _this.getTableSelectAll = false;
                                                }
                                            }
                                        }
                                    }
                                });
                            }
                        },
                        {
                            title: 'Key',
                            key: 'key',
                            render: (h, params) => {
                                let _this = this;
                                return h('Input', {
                                    props: {
                                        value: _this.itemsCopy[params.row._index].key
                                    },
                                    on: {
                                        input: (val) => {
                                            // params.row.key = val;
                                            _this.itemsCopy[params.row._index].key = val;
                                            _this.itemsCopy[params.row._index].check = true;
                                        },
                                        'on-focus': (e) => {
                                            this.upToDown = true;
                                            this.downToUp = false;
                                        }
                                    }
                                });
                            }
                        },
                        {
                            title: 'Value',
                            key: 'value',
                            render: (h, params) => {
                                let _this = this;
                                return h('Input', {
                                    props: {
                                        value: _this.itemsCopy[params.row._index].value
                                    },
                                    on: {
                                        input: (val) => {
                                            // params.row.value = val;
                                            _this.itemsCopy[params.row._index].value = val;
                                            _this.itemsCopy[params.row._index].check = true;
                                        },
                                        'on-focus': (e) => {
                                            this.upToDown = true;
                                            this.downToUp = false;
                                        }
                                    }
                                });
                            }
                        },
                        {
                            title: 'Description',
                            key: 'description',
                            render: (h, params) => {
                                let _this = this;
                                return h('Input', {
                                    props: {
                                        value: _this.itemsCopy[params.row._index].description
                                    },
                                    on: {
                                        input: (val) => {
                                            // params.row.description = val;
                                            _this.itemsCopy[params.row._index].description = val;
                                            _this.itemsCopy[params.row._index].check = true;
                                            // _this.$emit('Input', val);
                                        },
                                        'on-focus': (e) => {
                                            this.upToDown = true;
                                            this.downToUp = false;
                                        }
                                    }
                                });
                            }
                        },
                        {
                            title: 'Delete',
                            align: 'center',
                            width: 100,
                            render: (h, params) => {
                                if (this.itemsCopy.length !== 1) {
                                    return h('Button', {
                                        props: {
                                            size: 'small',
                                            icon: 'trash-b'
                                        },
                                        on: {
                                            click: () => {
                                                this.upToDown = true;
                                                this.downToUp = false;
                                                console.log('params.row -->', params.row);
                                                this.deleteTableRow(params.row._index);
                                            }
                                        }
                                    }, '删除');
                                }
                            }
                        }
                    ]
                },
                items: [
                    {
                        key: '',
                        value: '',
                        description: '',
                        check: true
                    }
                ], // get表格初始的数据
                itemsCopy: [
                    {
                        key: '',
                        value: '',
                        description: '',
                        check: false
                    }
                ], // get表格双向绑定的数据
                postTableData: {
                    header: [
                        {
                            width: 60,
                            align: 'center',
                            render: (h, params) => {
                                let _this = this;
                                return h('Checkbox', {
                                    props: {
                                        value: _this.itemsPostCopy[params.row._index].check
                                    },
                                    on: {
                                        'on-change': (e) => {
                                            _this.itemsPostCopy[params.row._index].check = e;
                                        }
                                    }
                                });
                            }
                        },
                        {
                            title: 'Key',
                            key: 'key',
                            render: (h, params) => {
                                let _this = this;
                                return h('Input', {
                                    props: {
                                        value: _this.itemsPostCopy[params.row._index].key
                                    },
                                    on: {
                                        input: (val) => {
                                            _this.itemsPostCopy[params.row._index].check = true;
                                            _this.itemsPostCopy[params.row._index].key = val;
                                        }
                                    }
                                });
                            }
                        },
                        {
                            title: 'Value',
                            key: 'value',
                            render: (h, params) => {
                                let _this = this;
                                return h('Input', {
                                    props: {
                                        value: _this.itemsPostCopy[params.row._index].value
                                    },
                                    on: {
                                        input: (val) => {
                                            _this.itemsPostCopy[params.row._index].check = true;
                                            _this.itemsPostCopy[params.row._index].value = val;
                                        }
                                    }
                                });
                            }
                        },
                        {
                            title: 'Description',
                            key: 'description',
                            render: (h, params) => {
                                let _this = this;
                                return h('Input', {
                                    props: {
                                        value: _this.itemsPostCopy[params.row._index].description
                                    },
                                    on: {
                                        input: (val) => {
                                            _this.itemsPostCopy[params.row._index].description = val;
                                            _this.itemsPostCopy[params.row._index].check = true;
                                        }
                                    }
                                });
                            }
                        },
                        {
                            title: 'Delete',
                            align: 'center',
                            width: 100,
                            render: (h, params) => {
                                if (this.itemsPostCopy.length !== 1) {
                                    return h('Button', {
                                        props: {
                                            size: 'small',
                                            icon: 'trash-b'
                                        },
                                        on: {
                                            click: () => {
                                                console.log('params.row -->', params.row);
                                                this.deletePostTableRow(params.row._index);
                                            }
                                        }
                                    }, '删除');
                                }
                            }
                        }
                    ]
                },
                itemsPost: [
                    {
                        key: '',
                        value: '',
                        description: '',
                        check: false
                    }
                ], // post表格初始的数据
                itemsPostCopy: [
                    {
                        key: '',
                        value: '',
                        description: '',
                        check: false
                    }
                ], // post表格双向绑定的数据
            };
        },
        methods: {
            urlOnFocus () {
                this.downToUp = true;
                this.upToDown = false;
            },
            // 返回
            closeAddPage () {
                this.$emit('closeAddPage');
            },
            // 增加
            modalAddFunc () {
                if (this.requestId === 1) { // 1表示get
                    this.getParameter();
                } else { // post
                    this.getParameter();
                    this.postParameter();
                }
                this.modalData.Add.loading = true;

                // 初始化所有字段错误信息的值
                for (let key in this.modalData.Add.formItemError) {
                    this.modalData.Add.formItemError[key] = '';
                }
                let isAdd = 2;
                if (this.modalData.Add.formValidate.isAdd) {
                    isAdd = 1;
                } else {
                    isAdd = 1;
                }
                this.$refs['AddformValidate'].validate((valid) => {
                    if (valid) {
                        let params = {
                            'add': 'add',
                            'isAdd': isAdd,
                            'caseName': this.modalData.Add.formValidate.caseName,
                            'hostManage_id': this.hostManage_id,
                            'ownershipGroup_id': this.modalData.Add.formValidate.parensGroupName,
                            'requestType': this.requestId,
                            'requestUrl': this.requestSelect.protocol + this.requestHost + this.requestUrl,
                            'getRequest': JSON.stringify(this.getRequest),
                            'postRequest': JSON.stringify(this.postRequest)
                        };

                        util.ajax.post('api/testCaseDetaile/sendTheRequest/0', qs.stringify(params)).then(res => {
                            if (res.data.code === 200) {
                                this.modalAdd = false;
                                this.$Notice.success({
                                    title: '保存成功',
                                    duration: 2
                                });
                                // this.initData();
                            } else {
                                // 添加失败
                                for (let key in res.data.msg) {
                                    this.modalData.Add.formItemError[key] = res.data.msg[key][0].message;
                                    // console.log('11111111111111111-->', res.data.msg[key][0].message);
                                }
                            }
                            this.modalData.Add.loading = false;
                        });
                    } else {
                        this.modalData.Add.loading = false;
                    }
                });
            },
            // 点击发送接口
            sendRequest () {
                let flag = true;
                if (!this.detailData.hostManage_id) {
                    flag = false;
                    this.$Notice.error({
                        title: '请选择Host配置',
                        duration: 2
                    });
                }
                if (!this.requestUrl) {
                    flag = false;
                    this.$Notice.error({
                        title: '请输入URL',
                        duration: 2
                    });
                }
                if (flag) {
                    if (this.requestId === 1) { // 1表示get
                        this.getParameter();
                    } else { // post
                        this.getParameter();
                        this.postParameter();
                        // console.log('postRequest------>', this.postRequest);
                    }
                    this.interface.sendLoaging = true;
                    let params = {
                        'caseName': this.detailData.caseName,
                        'ownershipGroup_id': this.detailData.ownershipGroup_id,
                        'type_status': this.detailData.type_status_id,
                        'requestType': this.requestId,
                        'hostManage_id': this.detailData.hostManage_id,
                        'xieyi_type': this.detailData.xieyi_type_id,
                        'requestUrl': this.requestUrl,
                        'getRequest': JSON.stringify(this.getRequest),
                        'postRequest': JSON.stringify(this.postRequest),
                        'talk_project_id': this.projectId
                    };
                    util.ajax.post('api/testCaseDetaile/sendTheRequest/' + this.blockId, qs.stringify(params)).then(res => {
                        if (res.data.code === 200) {
                            this.responseData = res.data.data;
                            this.$Notice.success({
                                title: res.data.msg,
                                duration: 2
                            });
                        } else {
                            // 登录失败
                            this.$Notice.error({
                                title: res.data.msg,
                                duration: 2
                            });
                        }
                    });
                }
            },
            // 点击保存触发
            saveInterface () {
                if (this.requestId === 1) { // 1表示get
                    this.getParameter();
                } else { // post
                    this.getParameter();
                    this.postParameter();
                }
                this.interface.saveLoading = true;
                let params = {
                    'caseName': this.detailData.caseName,
                    'ownershipGroup_id': this.detailData.ownershipGroup_id,
                    'type_status': this.detailData.type_status_id,
                    'requestType': this.requestId,
                    'hostManage_id': this.detailData.hostManage_id,
                    'xieyi_type': this.detailData.xieyi_type_id,
                    'requestUrl': this.requestUrl,
                    'getRequest': JSON.stringify(this.getRequest),
                    'postRequest': JSON.stringify(this.postRequest)
                };

                util.ajax.post('api/testCaseDetaile/update/' + this.blockId, qs.stringify(params)).then(res => {
                    if (res.data.code === 200) {
                        this.$Notice.success({
                            title: '保存成功',
                            duration: 2
                        });
                        // this.initData();
                    } else {
                        this.$Notice.success({
                            title: '保存失败',
                            duration: 2
                        });
                    }
                    this.interface.saveLoading = false;
                });

                this.interface.saveLoading = false;
            },
            // 获取选择框数据
            getRequestType () {
                util.ajax.get('api/testCaseDetaile/get_choices/0').then(res => {
                    if (res.data.code === 200) {
                        this.requestType = res.data.data.otherData;
                        this.agreementType = res.data.data.xieyiData;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });

                let params = {
                    'talk_project_id': this.projectId
                };
                util.ajax.get('api/testCaseGroup/superGroupName/0', {params: params}).then(res => {
                    if (res.data.code === 200) {
                        this.superGroupName = res.data.data.data_list;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
                util.ajax.get('api/testCaseDetaile/get_choices/0').then(res => {
                    if (res.data.code === 200) {
                        this.interfaceType = res.data.data.jiekouTypeData;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
                // util.ajax.get('api/configurationHost/miaoShuResult/0').then(res => {
                //     if (res.data.code === 200) {
                //         this.miaoShuResult = res.data.data.otherData;
                //     } else {
                //         // 登录失败
                //         console.log('获取内容异常');
                //     }
                // });
                util.ajax.get('api/testCaseDetaile/getHostYuMing/0', {params: params}).then(res => {
                    if (res.data.code === 200) {
                        if (res.data.data.otherData.length > 0) {
                            this.detailData.hostManage_id = res.data.data.otherData[0].id;
                        }
                        this.hostList = res.data.data.otherData;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
            },
            // get 参数获取
            getParameter () {
                let tempGet = [];
                this.postRequest = [];
                for (let i in this.itemsCopy) {
                    if (this.itemsCopy[i].check) {
                        tempGet.push({key: this.itemsCopy[i].key, value: this.itemsCopy[i].value, describe: this.itemsCopy[i].description});
                    }
                }
                // for (let i = 0; i < tempGet_v.length; i++) {
                //     let obj = tempGet_v[i];
                //     for (let key in obj) {
                //         let newKey = tempGet_k[i];
                //         if (newKey) {
                //             obj[newKey] = obj[key];
                //             delete obj[key];
                //         }
                //     }
                // }
                this.getRequest = tempGet;
            },
            // post 参数获取
            postParameter () {
                let tempPost = [];
                for (let i in this.itemsPostCopy) {
                    if (this.itemsPostCopy[i].check) {
                        tempPost.push({key: this.itemsPostCopy[i].key, value: this.itemsPostCopy[i].value, describe: this.itemsPostCopy[i].description});
                    }
                }
                this.postRequest = tempPost;
            },
            // 点击响应结果
            // clickResponse () {
            //     this.showResponse = !this.showResponse;
            // },
            // 点击请求历史
            clickHistroy () {
                this.showHistroy = !this.showHistroy;
            },
            // 删除表格一行数据
            deleteTableRow (index) {
                console.log('删除前deleteTableRow-->', this.itemsCopy);
                console.log('deleteTableRow-->', index);
                this.items.splice(index, 1);
                this.itemsCopy.splice(index, 1);
                console.log('deleteTableRow-->', this.itemsCopy);
            },
            deletePostTableRow (index) {
                this.itemsPost.splice(index, 1);
                this.itemsPostCopy.splice(index, 1);
            }
        },
        created () {
            this.getRequestType();
        },
        beforeUpdate () {
            console.log('updated==============================util.updateFlag-->', util.updateFlag);
            if (util.updateFlag) {
                util.updateFlag = false;
                let getRequestParameters = JSON.parse(this.detailData.getRequestParameters);
                let postRequestParameters = JSON.parse(this.detailData.postRequestParameters);
                if (this.detailData.requestType_id === 1) { // 1 表示get
                    if (getRequestParameters.length > 0) {
                        this.items = [];
                        this.itemsCopy = [];
                        // 初始化post参数
                        this.itemsPost = [{
                            key: '',
                            value: '',
                            description: '',
                            check: false
                        }];
                        this.itemsPostCopy = [{
                            key: '',
                            value: '',
                            description: '',
                            check: false
                        }];
                        // 加入get参数
                        for (let m = 0; m < getRequestParameters.length; m++) {
                            this.items.push({
                                key: '',
                                value: '',
                                description: '',
                                check: true
                            });
                            this.itemsCopy.push({
                                key: getRequestParameters[m].key,
                                value: getRequestParameters[m].value,
                                description: getRequestParameters[m].describe,
                                check: true
                            });
                        }
                    } else {
                        // 初始化post参数
                        this.itemsPost = [{
                            key: '',
                            value: '',
                            description: '',
                            check: false
                        }];
                        this.itemsPostCopy = [{
                            key: '',
                            value: '',
                            description: '',
                            check: false
                        }];
                    }
                } else { // 表示post
                    // 加入get参数
                    if (getRequestParameters.length > 0) {
                        this.items = [];
                        this.itemsCopy = [];
                        for (let m = 0; m < getRequestParameters.length; m++) {
                            this.items.push({
                                key: '',
                                value: '',
                                description: '',
                                check: true
                            });
                            this.itemsCopy.push({
                                key: getRequestParameters[m].key,
                                value: getRequestParameters[m].value,
                                description: getRequestParameters[m].describe,
                                check: true
                            });
                        }
                    } else {
                        // 初始化get参数
                        this.items = [{
                            key: '',
                            value: '',
                            description: '',
                            check: false
                        }];
                        this.itemsCopy = [{
                            key: '',
                            value: '',
                            description: '',
                            check: false
                        }];
                    }
                    // 加入post参数
                    if (postRequestParameters.length > 0) {
                        this.itemsPost = [];
                        this.itemsPostCopy = [];
                        for (let n = 0; n < postRequestParameters.length; n++) {
                            this.itemsPost.push({
                                key: '',
                                value: '',
                                description: '',
                                check: true
                            });
                            this.itemsPostCopy.push({
                                key: postRequestParameters[n].key,
                                value: postRequestParameters[n].value,
                                description: postRequestParameters[n].describe,
                                check: true
                            });
                        }
                    } else {
                        // 初始化post参数
                        this.itemsPost = [{
                            key: '',
                            value: '',
                            description: '',
                            check: false
                        }];
                        this.itemsPostCopy = [{
                            key: '',
                            value: '',
                            description: '',
                            check: false
                        }];
                    }
                }
                setTimeout(() => {
                    this.requestUrl = this.detailData.requestUrl;
                    this.requestId = this.detailData.requestType_id;
                    this.responseData = '';
                }, 200);
            }
        },
        watch: {
            // get参数的数据监听
            itemsCopy: {
                handler: function (val, oldVal) {
                    let temp = this.temp;
                    let flag = true;
                    let i = 0;
                    if (this.upToDown) {
                        for (i = 0; i < val.length; i++) {
                            if (this.itemsCopy[i].check) {
                                if (i === 0 && val[0].key && !val[0].value) {
                                    temp = temp + val[0].key;
                                } else if (i === 0 && val[0].key && val[0].value) {
                                    temp = temp + val[0].key + '=' + val[0].value;
                                } else if (val[i].key && !val[i].value) {
                                    temp = temp + '&' + this.itemsCopy[i].key;
                                } else if (val[i].key && val[i].value) {
                                    temp = temp + '&' + val[i].key + '=' + val[i].value;
                                }
                            }
                            // 控制是否有 '？'，有 key 就是 '？' ，否则是 '';
                            if (i >= 0 && val[i].key) {
                                this.requestSelect.questionMark = '?';
                                flag = false;
                            }
                            if (flag) {
                                this.requestSelect.questionMark = '';
                            }
                        }
                        // 自动生成下一行
                        if (this.itemsCopy[this.itemsCopy.length - 1].key || this.itemsCopy[this.itemsCopy.length - 1].value) {
                            if (this.itemsCopy.length === this.items.length) {
                                // console.log('------------------------->', this.itemsCopy.length, this.items.length);
                                this.getTableSelectAll = false;
                                this.items.push({
                                    key: '',
                                    value: '',
                                    description: '',
                                    check: false
                                });
                                this.itemsCopy.push({
                                    key: '',
                                    value: '',
                                    description: '',
                                    check: false
                                });
                            }
                        }
                        this.requestUrl = this.requestSelect.oldVal + this.requestSelect.questionMark + temp;
                        // console.log('itemsCopy--temp--------------->', temp);
                    }
                },
                deep: true
            },
            // url输入框参数的数据监听
            requestUrl: {
                handler: function (val, oldVal) {
                    let url = val;
                    // 过滤http 和 host
                    if (val.indexOf('http') > -1) {
                        url = (/\w+:\/\/[^\/]+(.+)($|#|\?)/.exec(val)||["",""])[1];
                        this.requestUrl = url;
                    }
                    console.log('过滤后的url----->', url);
                    let tempUrl = [];
                    let tempGet = [];
                    if (this.downToUp) {
                        if (url.indexOf('?') !== -1) {
                            let arr1 = url.split('?');
                            this.requestSelect.oldVal = arr1[0];
                            if (arr1[1].indexOf('&') !== -1) {
                                let arr2 = arr1[1].split('&');
                                // 获取url里的 k-v 数组
                                for (let i = 0; i < arr2.length; i++) {
                                    let arr3 = arr2[i].split('=');
                                    if (arr3[1]) {
                                        tempUrl.push({key: arr3[0], value: arr3[1]});
                                    } else {
                                        tempUrl.push({key: arr3[0], value: ''});
                                    }
                                }
                                let m = 0; // 表格选中行的数量
                                let deleteIndex = []; // 要删除的数组下标
                                // 把 url 里的 k-v 赋值到表格里，
                                for (let i = 0; i < this.itemsCopy.length; i++) {
                                    if (m < tempUrl.length && this.itemsCopy[i].check) {
                                        this.itemsCopy[i].key = tempUrl[m].key;
                                        this.itemsCopy[i].value = tempUrl[m].value;
                                        m = m + 1;
                                    } else if (m >= tempUrl.length && this.itemsCopy[i].check) {
                                        deleteIndex.push(i);
                                    }
                                    // 删除空白行
                                    if (!this.itemsCopy[i].key && !this.itemsCopy[i].value && !this.itemsCopy[i].description) {
                                        this.itemsCopy[i].check = false;
                                        this.deleteTableRow(i);
                                    }
                                }
                                // url里删除 k-v 时，表格也跟着删除
                                if (deleteIndex.length > 0) {
                                    for (let n = deleteIndex.length - 1; n >= 0; n--) {
                                        this.deleteTableRow(deleteIndex[n]);
                                    }
                                }
                                // url里新增 k-v 时，表格也跟着新增
                                if (m < tempUrl.length) {
                                    for (m; m < tempUrl.length; m++) {
                                        this.items.push({
                                            key: '',
                                            value: '',
                                            description: '',
                                            check: true
                                        });
                                        this.itemsCopy.push({
                                            key: tempUrl[m].key,
                                            value: tempUrl[m].value,
                                            description: '',
                                            check: true
                                        });
                                        // 增加一行空白行
                                        // if (m + 1 === tempUrl.length) {
                                        //     console.log('12----------------------------------------------------->');
                                        //     this.items.push({
                                        //         key: '',
                                        //         value: '',
                                        //         description: '',
                                        //         check: false
                                        //     });
                                        //     this.itemsCopy.push({
                                        //         key: '',
                                        //         value: '',
                                        //         description: '',
                                        //         check: false
                                        //     });
                                        // }
                                    }
                                }
                            } else { // url里只有一组k-value
                                // 当 ? 后面无数据时，清空表格
                                if (!arr1[1]) {
                                    // 清除刚开始表格的默认第一行数据
                                    this.itemsCopy.splice(0, 1);
                                    this.items.splice(0, 1);
                                    // 清空选中行的数据
                                    for (let i = this.itemsCopy.length - 1; i >= 0; i--) {
                                        if (this.itemsCopy[i].check) {
                                            this.itemsCopy.splice(i, 1);
                                            this.items.splice(i, 1);
                                        }
                                    }
                                } else {
                                    // 删除第一行外的数据
                                    for (let i = 0; i < this.itemsCopy.length; i++) {
                                        if (this.itemsCopy[0].key) {
                                            for (let i = this.itemsCopy.length - 1; i >= 1; i--) {
                                                this.itemsCopy.splice(i, 1);
                                                this.items.splice(i, 1);
                                            }
                                        }
                                    }
                                    // 无数据时添加一行
                                    if (this.itemsCopy.length < 1) {
                                        this.items.push({
                                            key: '',
                                            value: '',
                                            description: '',
                                            check: true
                                        });
                                        this.itemsCopy.push({
                                            key: '',
                                            value: '',
                                            description: '',
                                            check: true
                                        });
                                    }
                                    // 获取url输入框的值
                                    let arr3 = arr1[1].split('=');
                                    if (arr3[0] && arr3[1]) {
                                        tempUrl.push({key: arr3[0], value: arr3[1]});
                                    } else if (arr3[0] && !arr3[1]) {
                                        tempUrl.push({key: arr3[0], value: ''});
                                    } else {
                                        tempUrl.push({key: '', value: ''});
                                    }
                                    // 获取选中的 k-v 数组
                                    for (let i = 0; i < this.itemsCopy.length; i++) {
                                        if (this.itemsCopy[i].check) {
                                            tempGet.push({key: this.itemsCopy[i].key, value: this.itemsCopy[i].value});
                                        }
                                    }
                                    // 第一行值的赋值操作
                                    for (let i = 0; i < this.itemsCopy.length; i++) {
                                        if (this.itemsCopy.length < 3 && (!this.itemsCopy[0].key || !this.itemsCopy[1])) {
                                            this.itemsCopy[0].check = true;
                                            this.itemsCopy[0].key = tempUrl[0].key;
                                            this.itemsCopy[0].value = tempUrl[0].value;
                                        }
                                        if ((tempGet[0].key !== tempUrl[0].key || tempGet[0].value !== tempUrl[0].value) && this.itemsCopy[i].check) {
                                            this.itemsCopy[i].key = tempUrl[0].key;
                                            this.itemsCopy[i].value = tempUrl[0].value;
                                        }
                                    }
                                }
                            }
                        } else { // 没有 ？ 时删除表格所有选中行数据
                            for (let i = this.itemsCopy.length - 1; i >= 0; i--) {
                                if (this.itemsCopy[i].check) {
                                    this.itemsCopy.splice(i, 1);
                                    this.items.splice(i, 1);
                                }
                            }
                        }
                        // console.log('tempUrl-->', tempUrl);
                        // console.log('tempGet-->', tempGet);
                    }
                },
                deep: true
            },
            // post参数的数据监听
            itemsPostCopy: {
                handler: function (val, oldVal) {
                    // 自动生成下一行
                    if (this.itemsPostCopy[this.itemsPostCopy.length - 1].key || this.itemsPostCopy[this.itemsPostCopy.length - 1].value) {
                        if (this.itemsPostCopy.length === this.itemsPost.length) {
                            this.itemsPost.push({
                                key: '',
                                value: '',
                                description: '',
                                check: false
                            });
                            this.itemsPostCopy.push({
                                key: '',
                                value: '',
                                description: '',
                                check: false
                            });
                        }
                    }
                },
                deep: true
            },
            requestId (val) {
                // Post
                let _this = this;
                if (val === 2) {
                    if (this.itemsPost.length <= 0) {
                        this.itemsPost.push({
                            key: '',
                            value: '',
                            description: '',
                            check: false
                        });
                        this.itemsPostCopy.push({
                            key: '',
                            value: '',
                            description: '',
                            check: false
                        });
                    }
                    this.tabsShow = false;
                    this.showPostTable = false;
                    this.tabsActive = 'Body';
                    setTimeout(function () {
                        _this.tabsShow = true;
                    }, 50);
                }
                // Get
                if (val === 1) {
                    this.tabsShow = false;
                    this.showPostTable = true;
                    this.tabsActive = 'Authorization';
                    setTimeout(function () {
                        _this.tabsShow = true;
                    }, 50);
                }
            }
            // requestSelect: {
            //     handler: function (val, oldVal) {
            //         // 1
            //     },
            //     deep: true
            // },
            // caseName (val) {
            //     this.requestSelect.hostManage_id = this.hostList[val].id;
            //     this.requestHost = this.hostList[val].host;
            // }
        }
    };
</script>

<style scoped>
    pre {

        white-space: pre-wrap; /*css-3*/

        white-space: -moz-pre-wrap; /*Mozilla,since1999*/

        white-space: -pre-wrap; /*Opera4-6*/

        white-space: -o-pre-wrap; /*Opera7*/

        word-wrap: break-word; /*InternetExplorer5.5+*/

    }
</style>
